/***
A bar renders across the entire screen and can be used for footers & headers etc.

To create a bar simply include `@bar` in any element. Bars, like anything else, requires a [theme](themes.php) to look presentable.

A bar pulls itself to its sides to fill any padding around its parent element.

<div>I'm a normal <code>@bar</code></div>

If you want a bar to pull itself up as well (for a header maybe) you can use `@bar-top`. If you intend to use your bar in the bottom of the page you can use `@bar-bottom`.

**I'm still working on `@bar-fixed`, `@bar-fixed-top` and `@bar-fixed-bottom`**
***/
@mixin bar {
	display: block;

	padding: $padding-top-bottom $padding-left-right;
	margin: $margin-bottom (-$wrapper-padding);

	border-top: 1px solid;
	border-bottom: 1px solid;
	@include box-shadow($default-shadow);
}

@mixin bar-top ($full: true) {
	@if $full {
		@include bar;
	}

	margin: (-$wrapper-padding) (-$wrapper-padding) $margin-bottom;

	border-top: 0;
	border-bottom: 1px solid;
}

@mixin bar-bottom ($full: true) {
	@if $full {
		@include bar;
	}

	margin: $margin-bottom (-$wrapper-padding) (-$wrapper-padding);

	border-top: 1px solid;
	border-bottom: 0;
}

// TODO
@mixin bar-fixed ($full: true) {
	@if $full {
		@include bar;
	}

}

@mixin bar-fixed-top ($full: true) {
	@if $full {
		@include bar;
	}

}

@mixin bar-fixed-bottom ($full: true) {
	@if $full {
		@include bar;
	}

}
